<template>
  <div id="app">
    <div  class="container">

      <!--  顶部导航-->
      <ul class="nav nav-tabs" style="font-size: 20px;margin-top: 15px" >
        <li role="presentation" ><router-link to="/Main">首页</router-link></li>
        <li role="presentation"><router-link to="/courseList">全部课程</router-link></li>
        <li role="presentation"><router-link to="/teacherIndex">讲师</router-link></li>
        <li role="presentation"><router-link to="/memberDetail">个人主页</router-link></li>
        <li style="margin-top: 8px">
          <div>
            <input  class="searchBtnContent" v-model="searchBtnContent" placeholder="搜索课程" style="padding-left: 10px"/>
            <router-link :to="'/courseSearch/'+searchBtnContent"><span class="searchBtn"></span></router-link>

          </div>

        </li>
        <li role="presentation" class="memberOperate" v-if="!userInfo.id">
         <span> <router-link to="/Login/0">
            <i class="glyphicon glyphicon-user"></i>登录</router-link></span>
          <span> <router-link to="/Login/1" > 注册</router-link></span>
        </li>
        <li role="presentation" class="memberOperate" v-else>
          {{userInfo.nickname}}
          <img :src="userInfo.avatar" style="height: 50px;width: 50px;border-radius: 50%;">
          <span><a href="#" @click="logout">注销</a></span>
        </li>

      </ul>
    </div>

    <router-view @getMessage="showMsg"></router-view>



    <div>
      <img src="../static/5.png">
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">


      <div v-if="showView==1" class="prism-player" id="J_prismPlayer">
    </div>

  </span>
    </el-dialog>
  </div>

</template>

<script>
  import cookie from 'js-cookie'
  import member from './api/member'

  export default {
    name: 'App',

    created() {

      //获取路径里面token值
      this.token = this.$route.query.token
      /*判断请求路径是否带有token，如果有将值放入cookie，request拦截器拦截固定名称cookie,将cookie的值放入头信息中
      然后调用接口根据token获取用户数据
      */
      console.log("@@@@@@@@@@@"+this.token)
      if(this.token){
        this.wxLogin()
      }
      //从cookie里取用户数据
      this.showInfo()
      this.$router.push("/Main")

    },
    data(){
      return{
        userInfo:{},//用户信息
        token:'',//令牌字符串
        showView:1,
        dialogVisible: false,
        searchBtnContent:'',//搜索框内容
      }

    },
    methods:{
      //从cookie里取用户数据
      showInfo(){

        //从cookie里获取用户信息
        var userStr = cookie.get("member_cookie");
        //将从cookie里获取的用户信息字符串转换为json对象
        if(userStr){
          this.userInfo = JSON.parse(userStr)
        }
      },
      //注销
      logout(){
        //清空cookie中登录生成的token字符串
        cookie.set('gwt_token','',{domain:'localhost'})
        //清空cookie中用户信息字符串
        cookie.set("member_cookie",'',{domain:'localhost'})
        //跳转主页
        window.location.href="/Main"
      },
      //微信登录
      wxLogin(){
        //将登录生成的token放到cookie里面
        cookie.set("gwt_token",this.token,{domain:'localhost'})
        //清空cookie中可能存在的用户数据
        cookie.set("member_cookie",'',{domain:'localhost'})
        //根据request头信息中的token值获取扫码人信息
        member.getUserInfoByToken()
          .then(response=>{
            this.userInfo = response.data
            //将扫码人信息放入cookie中，后面的方法好从cookie里拿数据
            cookie.set("member_cookie",this.userInfo,{domain:'localhost'})
          })

      },
      //子组件调用方法
      showMsg () {   // methods方法  val即为子组件传过来的值
        this.dialogVisible=true

      },
      //关闭视频
      handleClose(){
        this.dialogVisible=false
        this.showView = 0
        setTimeout(()=>{
          this.showView=1
        },500)
      }
    },





  }
</script>

<style>
.searchBtn{
  height: 30px;
  width: 40px;
  display: inline-block;
  margin-left: -40px;
}
.searchBtnContent{
  width: 250px;
  background: url(../static/2.jpg) no-repeat right;
  background-size: 40px 30px;
}
  .memberOperate{
    margin-left: 380px;
    line-height: 60px;
  }
  .searchCourseBtn{
    display: inline-block;
    width: 30px;
    height: 25px;
    background: url("../static/2.jpg") ;
    margin-left: -30px;
  }
</style>
